<template>
  <section class="upload-image">

    <div class="custom-uploader" @click="uploadFile.showUpload=2">
      <el-image :src="value">
        <div slot="error" class="image-slot">
          <template>
            <div class="icon-wrap">
              <i class="el-icon-plus avatar-uploader-icon" />
            </div>
          </template>
        </div>
      </el-image>
      <i class="el-icon-delete" @click.stop="delImg" />
    </div>
    <image-no-cropper-upload
      v-if="uploadFile.showUpload===2"
      ref="imageUpload"
      :accept="uploadFile.accept"
      :limit="1"
      :show-chunks="true"
      :multiple="false"
      :is-oss="uploadFile.isOss"
      :chunk-size="uploadFile.chunksize"
      @close="uploadFile.showUpload = -1"
      @success="uploadSuccess"
    >
      <div slot="tip" class="upload-tip">
        <i class="el-icon-info" />
        :
        只能上传：图片文件
      </div>
    </image-no-cropper-upload>

  </section>
</template>
<script>
import mixins from './../mixins'
import { getToken } from '@/utils/auth'
import ImageNoCropperUpload from '@/components/ImageNoCropperUpload'

export default {
  name: 'VUploadImage',
  components: { ImageNoCropperUpload },
  mixins: [mixins],
  props: {
    option: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      upload: {
        headers: {
          token: getToken()
        },
        action: `${process.env.VUE_APP_BASE_API}files/upload`,
        result: '',
        loading: false
      },
      result: '',
      uploadFile: {
        viewId: '',
        view: '/API-DOCUMENT/document/file/download?id=',
        imagecropperKey: 0,
        showUpload: -1, // 1视频 2图片 3附件
        accept: '',
        fileType: '',
        fileIndex: 0,
        isOss: !!sessionStorage.getItem('FILE_SAVE_THIRD_CONFIG')
      },
      fileViewId: ''
    }
  },
  computed: {
    maxSize() {
      return this.option.maxSize || 10
    }
  },
  methods: {
    delImg() {
      this.value = ''
      this.dispatch_event('filed-value-change', this.value)
    },
    beforeupload(file) {
      const _this = this
      const { maxSize } = this
      const size = file.size / 1024 / 1024 <= maxSize
      if (!size) {
        this.$confirm(`文件大小超过${(maxSize)}MB限制`, '提示', {
          confirmButtonText: '重新上传',
          cancelButtonText: '取消',
          type: 'warning',
          closeOnClickModal: false
        }).then(() => {
          _this.$refs.upload.$children[0].handleClick()
        })
      }
      if (size) {
        this.upload.loading = true
      }
      return size
    },

    uploadSuccess(id, files) {
      if (id) {
        this.value = this.uploadFile.isOss ? files[0].ossPath : this.uploadFile.view + id
        // this.value = id
        this.handleChange()
        this.uploadFile.showUpload = -1
      }
    },

    uploaderror() {
      this.result = 'fail'
    },

    getValue() {
      return this.value
    },

    setValue(v) {
      this.value = v
      this.setCheck()
    },

    setCheck() {
      const { required, value } = this
      const { result, loading } = this.upload
      let error = false; let error_message = ''
      if (required) {
        if (!value) {
          error = true
          if (!result) {
            if (this.$refs.upload.uploadFiles.length <= 0) {
              error_message = '必填选项不能为空'
            } else {
              error = false
            }
          } else if (result === 'fail') {
            error_message = '上传失败'
          } else if (loading) {
            error_message = '上传中'
          }
        } else {
          error = false
        }
      } else {
        error = false
      }
      this.error_ = error
      this.error_message_ = error_message
      this.fieldCheck()
    },

    handleRemove() {
      this.value = ''
      this.handleChange()
    },

    handleChange() {
      this.dispatch_event('filed-value-change', this.value)
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/styles/var.scss';
@import '@/styles/utility/center.scss';

.upload-image {
  /deep/ {
    .el-upload {
      .el-upload-dragger {
        border: none;
        width: auto;
        height: auto;
        border-radius: 4px;
      }
    }
  }
  /deep/ .custom-uploader {
    position: relative;
    .el-icon-delete {
      position: absolute;
      right: -20px;
      top: 4px;
      &:hover {
        color: $mainColor;
        transform: scale(1.5);
      }
    }
  }

  .upload-image-inner {
    border-radius: 4px;
    border: 1px solid $f4;
    background-color: $f9;
    cursor: pointer;

    .el-image {
      width: 100px;
      height: 100px;
      border-radius: 4px;
      display: block;
    }

    .inner-value {
      position: relative;

      .remove {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        z-index: 10;
        cursor: default;
        color: #fff;
        opacity: 0;
        font-size: 20px;
        background-color: rgba(0, 0, 0, 0.5);
        transition: opacity 0.3s;
        @include center();

        > i {
          cursor: pointer;
        }
      }
    }

    .inner-icon {
      display: inline-block;
      font-size: 28px;
      color: $f4;
      width: 100px;
      height: 100px;
      line-height: 100px;
      text-align: center;
      border-radius: 4px;
    }

    &:hover {
      border-color: $a1;

      .remove {
        opacity: 1;
      }

      .inner-icon {
        color: $a1;
      }
    }

    &.disable {
      cursor: not-allowed;
      background-color: $f7;

      &:hover {
        border-color: $f4;

        .inner-icon {
          color: $f4;
        }
      }
    }

    &.error {
      border-color: $a3;

      &:hover {
        border-color: $a3;

        .inner-icon {
          color: $f4;
        }
      }
    }
  }
}
</style>
